<template>
  <div class="errorpage" id="bgstar" ref="bgstar">
    <div class="down" @click="gotopage">剩余{{ count }} S</div>
    <!-- <img src="@/assets/images/404.png" class="myimg" alt="" /> -->
    <img :src="Pic" class="myimg" alt="" />
    <span class="spandot" v-for="(l, i) in spanList" :key="i" :style="l">
    </span>
  </div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, onMounted, onUnmounted } from "vue";
import Pic from "@/assets/images/404.png"; //这里引入上面就可以用了
import { useRouter } from "vue-router";
let timer: any = null;
// interface 定义对象类型
interface StyleObj {
  left?: string;
  top: string;
  transform: string;
  background: string;
  animationDelay: string;
}
export default {
  setup() {
    const bgstar = ref(); // 表示指向是一个DOM或者一个组件。ref操作单个DOM元素
    const router = useRouter(); //路由对象
    //  const Pic = ref<any>(Pic) //pic本质是个字符串，为什么用ref不能出来??
    const count = ref<number>(5);
    // const state = reactive({
    //   Pic,
    // });
    
    // const spanList = reactive([]); //可以吗?可以
    const spanList = reactive<StyleObj[]>([]);
    // const spanList = ref<StyleObj[]>([]);
    const timeDown = (): void => {
      timer = setInterval(() => {
        if (count.value > 0) {
          count.value--;
        } else {
          clearInterval(timer);
          timer = null;
          gotopage(); //先注释了，免得跳
        }
      }, 1000);
    };

    const gotopage = () => {
      router.push({ name: "login" });
    };

    onMounted(() => {
      timeDown();
      getSpanInit();
    });

    onUnmounted(() => {
      clearInterval(timer);
      timer = null;
    });

    const getSpanInit = () => {
      var width = bgstar.value.clientWidth;
      var height = bgstar.value.clientHeight;
      // console.log(width, height);
      for (var i = 0; i < 520; i++) {
        var left = Math.random() * width;
        var top = Math.random() * height;
        var scaler = Math.random() * 1.5;
        var rate = Math.random() * 2.5;
        var opacity = Math.random() * 1;
        var r = 255;
        var g = 255;
        var b = 255;

        spanList.push({
          left: left + "px",
          top: top + "px",
          transform: `scale(${scaler})`,
          background: `rgba(255,255,255,${opacity})`,
          // background: `rgba(${r},${g},${b},${opacity})`,
          animationDelay: rate + "s",
        });
      }
    };

    return {
      // Pic,
      bgstar,
      count,
      gotopage,
      // ...toRefs(state),
      spanList,
    };
  },
};
</script>

<style lang="scss" scoped>
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
  }
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff !important;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>
